<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
             title="编辑"
             append-to-body width="30%">
    <el-form ref="form" :model="userRel" size="small" label-width="110px">
      <el-form-item label="学员姓名">
        <el-input v-model="userRel.userName" :disabled="true" style="width: 320px;"/>
      </el-form-item>
      <el-form-item label="导师列表">
        <el-select v-model="userRel.teacherId" :multiple="true" clearable placeholder="请选择" style="width: 320px;">
          <el-option
            v-for="item in teacherList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { findUserPage, createRel } from '@/api/business/user'

  export default {
    name: 'teacherUserRel',
    data() {
      return {
        loading: false,
        dialog: false,
        userRel: {
          userId: '',
          userName: '',
          teacherId: []
        },
        teacherList: []
      }
    },
    methods: {
      cancel() {
        this.dialog = false
      },
      getTeacherList() {
        const params = {
          page: 1,
          size: 1000,
          roleCode: 'r_teacher'
        }
        findUserPage(params).then(data => {
          this.teacherList = data.content
          console.log(this.teacherList)
        })
      },
      doSubmit() {
        createRel(this.userRel).then(res => {
          this.$notify({
            title: '操作成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.$parent.init()
          this.cancel()
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>

</style>
